<template>
    <div class=''>
        <!-- 生命周期  从vue创建开始 中间会经历创建 运行 到销毁 这个期间会出现很多事件 这些事件就是生命周期 -->
        <h3 id="h3">{{ msg }}</h3>
        <button @click="change">change</button>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            msg: "hello word"
        };
    },
    components: {

    },
    beforeCreate() {
        console.log("是遇到的第一个生命周期，代表的时机：是实例在完全创建之前");
        //   注意 在这个生命周期中 data和methods中的数据都还没有初始化完成
        console.log(this.msg);
    },
    created() {
        console.log(this.$route.params);

        // data和methods中的数据都创建完成，是vue页面中最早可以调用data和methods的数据
        console.log(this.msg);
        axios.get("https://wisdomchess.chandakeji.com/api/work/record/playerList", {
            params: {
                lobbDisplay: 1,
                round: 10,
                unfinished: 0,
                top: 1,
                pageSize: 10,
                pageNum: 1
            }
        }).then(res => {
            console.log(res);

        })
    },
    beforeMount() {
        // 表示模板已经在内存中渲染完成，但是还没有在页面上渲染
        console.log("beforeMount");

    },
    mounted() {
        //    表示内存中的 数据已经渲染到模板上，用户也可以看得见
        console.log("mounted");
    },
    // 在页面第一次渲染的时候，只会走四个生命周期

    // 两个运行中的生命周期
    beforeUpdate() {
        // 这个时候表示页面数据还没有更新，
        console.log(document.getElementById("h3").innerText);
        console.log(this.msg);
    },
    updated() {
        // 不管是页面还是数据都已经是最新的了
        console.log(document.getElementById("h3").innerText);
        console.log(this.msg);
    },
    methods: {
        change() {
            this.msg = "你好"
        }
    },
};
</script>

<style lang='scss' scoped></style>